$(function(){
    //鼠标移入 li 显示p的边框 和 子级菜单
    $("#banner .category li").mouseenter(function(){
        //当前li的p
        $(this).find("p").addClass("active_p");
        $(this).find("div").addClass("active_div")
    })
    //鼠标移入 li 隐藏p的边框 和 子级菜单
    $("#banner .category li").mouseleave(function(){
        //当前li的p
        $(this).find("p").removeClass("active_p");
        $(this).find("div").removeClass("active_div")
    })

   
    //电子书 手风琴:
    $(".ebook_right>ul>li").mouseenter(function(){
        //鼠标移入 隐藏标题  显示盒子
        $(this).find("h3").addClass("title_hide")
        $(this).find("div").addClass("book_show")

        //其他li的 h3 删除 类名
        $(this).siblings().find("h3").removeClass("title_hide")
        //其他li的 div 删除类名
        $(this).siblings().find("div").removeClass("book_show")
    })

    //  //电子书区域 tab栏目切换
    // $("#ebook .ebook_left .ebook_tab li").on("mouseenter",function(){
    //     $(this).addClass("active").siblings().removeClass("active");
    //     //明确当前 li的索引:知道 到底是哪一个 li在触发 事件
    //     let index=$(this).index()
    //     //根据当前li的索引 进行筛选
    //     $("#ebook .book_list").eq(index).addClass("show").siblings().removeClass("show")

    // })
    // //服装区域的 tab切换
    // $(".clothes #clothes_tab li").mouseenter(function(){
    //     // 触发事件的 li 要添加 类名active 其他的li要删除类名active
    //     $(this).addClass("active").siblings().removeClass("active");
    //     //  找当前事件源  对应的 下面盒子  做 类名 on的添加 和 移出
    //     let index=$(this).index()
    //     //先获取 所有盒子对象集 筛选 索引 找对应
    //     $(".clothes .tab_box").eq(index).addClass("on").siblings().removeClass("on")
    // })

    // //户外运动区域的 tab切换
    // $(".outdoor_sport .outdoor_sport_tab li").mouseenter(function(){
    //     // 触发事件的 li 要添加 类名active 其他的li要删除类名active
    //     $(this).addClass("active").siblings().removeClass("active");
    //     //  找当前事件源  对应的 下面盒子  做 类名 on的添加 和 移出
    //     let index=$(this).index()
    //     //先获取 所有盒子对象集 筛选 索引 找对应
    //     $(".outdoor_sport .tab_box").eq(index).addClass("on").siblings().removeClass("on")
    // })

    /*
    如果要抽取函数:
    每次绑定事件的对象 不同
    每次 要切换的盒子对象 不同 
    li的类名 不同
    盒子的 类名 不同
    */
   function my_tab_change(event_obj,box_obj,li_class_name,box_class_name){
       
        //户外运动区域的 tab切换
        event_obj.mouseenter(function(){
            // 触发事件的 li 要添加 类名active 其他的li要删除类名active
            $(this).addClass(li_class_name).siblings().removeClass(li_class_name);
            //  找当前事件源  对应的 下面盒子  做 类名 on的添加 和 移出
            let index=$(this).index()
            //先获取 所有盒子对象集 筛选 索引 找对应
            box_obj.eq(index).addClass(box_class_name).siblings().removeClass(box_class_name)
        })
   }

   //电子书的tab
   my_tab_change($("#ebook .ebook_tab li"),$("#ebook .book_list"),"active","show")
   //服装的tab
   my_tab_change($(".clothes #clothes_tab li"),$(".clothes .tab_box"),"active","on")
   //户外运动的tab
   my_tab_change($(".outdoor_sport .outdoor_sport_tab li"),$(".outdoor_sport .tab_box"),"active","on")
   //童装的tab
   my_tab_change($(".kids_clothes .kids_clothes_tab li"),$(".kids_clothes .tab_box"),"active","on")

    //主轮播图
    $("#bannerInner").tyslide({
        boxh: 400,//盒子的高度
        w: 1000,//盒子的宽度
        h: 370,//图片的高度
        isShow: true,//是否显示控制器
        isShowBtn: true,//是否显示左右按钮
        controltop: 0,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 20,//控制按钮宽度
        controlsH: 20,//控制按钮高度
        radius: 10,//控制按钮圆角度数
        controlsColor: "#d7d7d7",//普通控制按钮的颜色
        controlsCurrentColor: "#ff6600",//当前控制按钮的颜色
        isShowNum: true //是否显示数字
      });

      //轮播图函数
      function my_silder2(jq_obj,box_h,box_w,img_h,fy_w=14,fy_h=2,fy_radius=0,siblings_color="#fff",cur_color="#ccc"){
          //任意区域的轮播图
          jq_obj.tyslide({
          boxh: box_h,//盒子的高度
          w: box_w,//盒子的宽度
          h: img_h,//图片的高度
          isShow: true,//是否显示控制器
          isShowBtn: true,//是否显示左右按钮
          controltop: 5,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
          controlsW: fy_w,//控制按钮宽度
          controlsH: fy_h,//控制按钮高度
          radius:fy_radius,//控制按钮圆角度数
          controlsColor: siblings_color,//普通控制按钮的颜色
          controlsCurrentColor: cur_color,//当前控制按钮的颜色
          isShowNum: false //是否显示数字
          });

      }
      /*
          参数1:jq对象
          参数2:盒子高度
          参数3:盒子宽度
          参数4:图片高度
          参数5:按钮宽度 有默认值
          参数6:按钮高度 有默认值
          参数7:按钮圆角值 有默认值
          参数8:其他 按钮 的颜色
          参数9:当前 按钮的颜色
      */
      /*服装区域*/
      my_silder2($(".clothes .pptbox"),338,436,338)
      //户外运动区域的轮播
      my_silder2($(".outdoor_sport .pptbox"),338,436,338)
      //电子书区域
      my_silder2($(".book_list .pptbox"),218,326,218)
      //童装区域
      my_silder2($(".kids_clothes .pptbox"),338,436,338)

      //固定首行:
      /*
        1.事件:scroll 滚动事件,给window绑定
        2.jq 的 获取滚动距离:jq.scrollTop()
        3.判断 > 300 的时候 显示首行 否则 就隐藏首行
            注意点:用动画 可能会出现 抖动的BUG 目前不管
      
      */
     $(window).scroll(function(){
        //  console.log($(this).scrollTop())
        let sTop=$(this).scrollTop()
        if(sTop>300){
            //显示
            // $("#fixedHeader").slideDown()
            $("#fixedHeader").show()
        }else{
            //隐藏
            // $("#fixedHeader").slideUp()
            $("#fixedHeader").hide()
        }
     })


     //楼层滚动 移入 移出 显示和隐藏
     /*
     找li 绑定 移入移出 的事件
     移入 做显示  宽变80 
     移出  做隐藏 宽变 40

     难点是变颜色:
     第一个对应:red 
     第二个对应:黄 
     第三个对应:绿色 
     第四个对应:蓝色
     第五个对应:粉色
     */
    //颜色数组 跟li 做对应关系
    let bgcArr=["red","#f60","green","blue","pink"]
    $("#floorBox ul li").hover(function(){
        //这个函数做移入的
        $(this).css("width",80)
        let index=$(this).index()
        $(this).css("backgroundColor",bgcArr[index])
    },function(){
        //这个函数做移出的
        $(this).css("width",'')
        //$(this).css("background",'') ''表示用默认值
        $(this).css("background",'')
    })

    //点击滚动
    $("#floorBox ul li").click(function(){
        /*
            1.获取当前li 的索引 匹配指定楼层(如何匹配)
            
            2.设置滚动距离:
                找到对应的楼层 到 顶部的 距离:(如何获取这个距离)
                滚动到 距离就可以了
        */

        let index=$(this).index();

        //找楼层 主要是为了获取 楼层到 底部的距离(重点 获取位置)
        let sTop=$(".floor").eq(index).offset().top
        // 滚动到 sTop:如何到 哪里 照着下面抄
        $("html,body").animate({"scrollTop":sTop},1500)

    })




})